<template>
	<view class="container bg-ghostWhite">
		<view class="m-hairline--bottom foot-line"></view>
		<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
		<view class="m-header">
			<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
			<view class="g-custom-nav flex-box plr30" :style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<image class="icon-logo mr30" :src="logo" mode="aspectFit"></image>
				<!-- #ifdef MP-WEIXIN -->
				<navigator class="search-box flex-box pl25 pr30" url="/pages/search/search" hover-class="none">
					<view class="flex-1 fs24 col-9">输入搜索关键词</view>
					<image class="icon-search" src="../../static/icon/icon_search.png" mode="aspectFit"></image>
				</navigator>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<navigator class="search-box flex-box pl25 pr30 flex-1" url="#" hover-class="none">
					<view class="flex-1 fs24 col-9">输入搜索关键词</view>
					<image class="icon-search" src="../../static/icon/icon_search.png" mode="aspectFit"></image>
				</navigator>
				<!-- #endif -->
			</view>
		</view>
		<!-- 内容 -->
		<view class="main" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
			<!-- 轮播 -->
			<uni-swiper-dot mode="round" :current="topSwipercurrent" :info="topSwiperInfo" :dotsStyles="topDotsStyles">
				<swiper class="top-swiper" @change="topSwiperChange" autoplay circular>
					<swiper-item v-for="(item, index) in topSwiperInfo" :key="item.id" @click="bannerNav(item.minapp_url)"><image class="img-swiper" :src="item.thumb_image" mode="aspectFill"></image></swiper-item>
					<!-- <swiper-item><image class="img-swiper" src="../../static/images/img_banner1.png" mode="aspectFill"></image></swiper-item>
					<swiper-item><image class="img-swiper" src="../../static/images/img_banner1.png" mode="aspectFill"></image></swiper-item> -->
				</swiper>
			</uni-swiper-dot>
			<!-- 特点 -->
			<view class="feature-row flex-box flex-between plr20 ptb30 col-red bg-ghostWhite">
				<view class="flex-box">
					<image src="../../static/icon/icon_teacher.png" mode="aspectFit"></image>
					<view class="fs22">金牌导师</view>
				</view>
				<view class="flex-box">
					<image src="../../static/icon/icon_goods.png" mode="aspectFit"></image>
					<view class="fs22">绝对干货</view>
				</view>
				<view class="flex-box">
					<image src="../../static/icon/icon_students.png" mode="aspectFit"></image>
					<view class="fs22">学员互动</view>
				</view>
				<view class="flex-box">
					<image src="../../static/icon/icon_data.png" mode="aspectFit"></image>
					<view class="fs22">数据贯通</view>
				</view>
			</view>
			<!-- 菜单导航 -->
			<view class="menu-box p50 mb25 br10 bg-white flex-box flex-between flex-align-start tc">
				<view @click="tabNav(1)" hover-class="none">
					<image src="/static/icon/icon_free.png" mode="aspectFit"></image>
					<view class="fs22 col-3">免费课程</view>
				</view>
				<view @click="tabNav(2)" hover-class="none">
					<image src="/static/icon/icon_vip.png" mode="aspectFit"></image>
					<view class="fs22 col-3">VIP课程</view>
				</view>
				<navigator url="/pages/offline_course_list/offline_course_list" open-type="switchTab" hover-class="none">
					<image src="/static/icon/icon_offline.png" mode="aspectFit"></image>
					<view class="fs22 col-3">线下课程</view>
				</navigator>
				<view @click="tabNav(0)" hover-class="none">
					<image src="/static/icon/icon_online.png" mode="aspectFit"></image>
					<view class="fs22 col-3">线上互动</view>
				</view>
			</view>
			<!-- 限时免费 -->
			<view class="pt30 plr35 pb35 bg-white br10 mb25" v-if="freeCourseLists.length > 0">
				<view class="flex-box mb30">
					<view class="mr30 fs34 col-0 flex-1">免费推荐</view>
					<!-- <navigator url="#" class="flex-1 fs24 col-9 mt10" hover-class="none">更多免费内容></navigator> -->
					<!-- <view class="g-btn3" @click="freeEnroll" :class="(freeCourseLists[freeCourseIndex].state == 2 && freeCourseLists[freeCourseIndex].enroll_status == 0)?'':'inactive'">马上报名</view> -->
				</view>
				<view class="start-time mb35" v-if="freeCourseLists.length > 0">
					<view @click="changeFreeTab(index)" class="time-item pt15" :class="freeCourseIndex == index ? 'active' : ''" v-for="(item, index) in freeCourseLists" :key="item.id">
						<view class="">{{ item.state == 1 ? '进行中' : '即将开始' }}</view>
						<view class="m-ellipsis plr5">{{ item.start_time_text }} - {{ item.end_time_text }}</view>
					</view>
					<!-- <view class="time-item pt15">
						<view class="">09月24日</view>
						<view class="">20:00-22:00</view>
					</view>
					<view class="time-item pt15">
						<view class="">09月24日</view>
						<view class="">20:00-22:00</view>
					</view> -->
				</view>
				<view class="course-list1 flex-box flex-wrap" v-if="freeCourseLists.length > 0">
					<view
						@click="navication(item.id, item.type)"
						class="nav-course"
						v-if="freeCourseLists[freeCourseIndex].course.length > 0"
						hover-class="none"
						v-for="(item, index) in freeCourseLists[freeCourseIndex].course"
						:key="item.id"
					>
						<image class="img-kechen" :src="item.thumb_image" mode="aspectFill"></image>
						<view class="m-ellipsis fs24 col-0 mb15">{{ item.name }}</view>
						<view class="flex-box mb15">
							<image class="icon-media mr5" v-if="item.type == 1" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
							<image class="icon-media mr5" v-else-if="item.type == 2" src="/static/icon/icon_video.png" mode="aspectFit"></image>
							<image class="icon-media mr5" v-else-if="item.type == 3" src="/static/icon/icon_book.png" mode="aspectFit"></image>

							<view class="fs20 col-6">{{item.type==3?item.total_num:item.play_count }}人看过</view>
						</view>
						<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
						<view class="g-price1" v-if="!isIos || platformStatus==1">{{ item.is_charge == 0 ? '免费' : item.salesprice }}</view>
					</view>
				</view>
			</view>
			<!-- 定制您的学习计划 -->
			<!-- <navigator url="#" class="custom-plan ptb15 plr45 bg-white br10 mb25 flex-box" hover-class="none">
				<view class="flex-1">
					<view class="fs32 col-0 mb10">定制您的学习计划</view>
					<view class="fs22 col-6 mb15">根据您的学习兴趣推荐</view>
					<view class="g-btn3">开启学习之旅</view>
				</view>
				<image class="icon-plan" src="/static/icon/icon_plan.png" mode="aspectFit"></image>
			</navigator> -->
			<!-- 猜你喜欢 -->
			<view class="p35 pb5 bg-white br10 mb25" v-if="guessCourseLists.length>0">
				<view class="index-title-row flex-box mb30">
					<view class="mr30 fs34 col-0 flex-1">猜你喜欢</view>
					<view class="flex-box mr20">
						<image class="icon-change mr5" src="/static/icon/icon_change.png" mode="aspectFit"></image>
						<view class="fs24 col-0" @click="changeGuess()">换一换</view>
					</view>
					<navigator url="/pages/course_list/course_list" open-type="switchTab" class="pl15 fs24 col-9 m-hairline--left nav-more" hover-class="none">更多></navigator>
				</view>
				<view class="course-list1 flex-box flex-wrap">
					<view @click="navication(item.id, item.type)" class="nav-course mb35" hover-class="none" v-for="(item, index) in guessCourseLists" :key="item.id">
						<image class="img-kechen" :src="item.thumb_image" mode="aspectFill"></image>
						<view class="m-ellipsis fs24 col-0 mb15">{{ item.name }}</view>
						<view class="flex-box mb15">
							<image class="icon-media mr5" v-if="item.type == 1" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
							<image class="icon-media mr5" v-else-if="item.type == 2" src="/static/icon/icon_video.png" mode="aspectFit"></image>
							<image class="icon-media mr5" v-else-if="item.type == 3" src="/static/icon/icon_book.png" mode="aspectFit"></image>

							<view class="fs20 col-6">{{ item.type==3?item.total_num:item.play_count }}人看过</view>
						</view>
						<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
						<view class="g-price1" v-if="!isIos || platformStatus==1">{{ item.is_charge == 0 ? '免费' : item.salesprice }}</view>
					</view>
				</view>
			</view>
			<!-- 每日金句 -->
			<view class="good-sentence bg-white br10 mb25" v-if="maxim.id">
				<view class="p35">
					<view class="index-title-row flex-box mb35">
						<view class="mr30 fs34 col-0 flex-1">每日金句</view>
						<view class="flex-box mr20" @click="fetchMaxim()">
							<image class="icon-change mr5" src="/static/icon/icon_change.png" mode="aspectFit"></image>
							<view class="fs24 col-0">换一换</view>
						</view>
						<!-- <navigator url="#" class="pl15 fs24 col-9 m-hairline--left nav-more" hover-class="none">更多></navigator> -->
					</view>
					<view class="flex-box">
						<image class="img-sentence mr25" :src="maxim.teacher.thumb_image ? maxim.teacher.thumb_image : ''" mode="aspectFill"></image>
						<view class="flex-1 fs28 col-0">
							<view class="m-ellipsis-l3"><rich-text :nodes="maxim.content"></rich-text></view>
							<view>——{{ maxim.teacher.name }}</view>
						</view>
					</view>
				</view>
				<view class="foot-row flex-box ptb30 m-hairline--top">
					<!-- <button class="m-button flex-box flex-1 flex-center">
						<image class="icon mr10" src="/static/icon/icon_comment.png" mode="aspectFit"></image>

						<view class="fs24 col-9">{{maxim.comment_count}}</view>
					</button> -->
					<button open-type="share" class="m-button flex-box flex-1 flex-center">
						<image class="icon mr10" src="/static/icon/icon_forward.png" mode="aspectFit"></image>
						<view class="fs24 col-9">转发</view>
					</button>
					<button class="m-button flex-box flex-1 flex-center" @click="toggleFav()">
						<image class="icon mr10"  v-if="!maxim.fav_count" src="/static/icon/icon_fabulous_normal.png" mode="aspectFit"></image>
						<image class="icon mr10"  v-else src="/static/icon/icon_fabulous_selected.png" mode="aspectFit"></image>
						<view class="fs24 col-9">赞</view>
					</button>
				</view>
			</view>
			<!-- 精品课程 -->
			<view class="p35 pb20 bg-white br10 mb25" v-if="qualityCourseLists.length > 0">
				<view class="index-title-row flex-box mb30">
					<view class="mr30 fs34 col-0 flex-1">精品课程</view>
					<navigator url="/pages/course_list/course_list" open-type="switchTab" class="pl15 fs24 col-9 m-hairline--left nav-more" hover-class="none">更多></navigator>
				</view>
				<view class="course-list2">
					<view @click="navication(item.id, item.type)" v-for="(item, index) in qualityCourseLists" :key="item.id" class="nav-course flex-box mb30" hover-class="none">
						<image class="img-course mr20" :src="item.thumb_image" mode="aspectFill"></image>
						<view class="flex-1">
							<view class="m-ellipsis fs28 col-0 mb10">{{ item.name }}</view>
							<view class="m-ellipsis fs24 col-6 mb30">{{ item.description }}</view>
							<view class="flex-box">
								<image class="icon1 mr10" v-if="item.type == 1" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
								<image class="icon1 mr10" v-else-if="item.type == 2" src="/static/icon/icon_video.png" mode="aspectFit"></image>
								<image class="icon1 mr10" v-else-if="item.type == 3" src="/static/icon/icon_book.png" mode="aspectFit"></image>

								<view class="flex-1 fs22 col-9">{{ item.type==3?item.total_num:item.play_count }}人学习过</view>
								<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
								<view class="g-price1" v-if="!isIos || platformStatus==1">{{ item.is_charge == 0 ? '免费' : item.salesprice }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 落地案例 -->
			<view class="case-box br10 bg-white" v-if="textCourseLists.length > 0">
				<view class="case-head flex-box ptb35 plr40 bg-1 flex-align-end">
					<view class="flex-1 col-f">
						<view class="mb15 fs36">落地案例</view>
						<view class="fs32">案例快速落地</view>
					</view>
					<!-- <view class="flex">
						<view class="btn"><image src="/static/icon/icon_arrow_left.png" mode="aspectFit"></image></view>
						<view class="btn"><image src="/static/icon/icon_arrow_right.png" mode="aspectFit"></image></view>
					</view> -->
				</view>
				<view class="plr35 pt15">
					<navigator
						:url="'/pages/article_detail/article_detail?course_id=' + item.id"
						class="nav-case flex-box ptb25"
						hover-class="none"
						v-for="(item,index) in textCourseLists"
						:key="item.id"
					>
						<image class="mr20" :src="item.thumb_image" mode="aspectFill"></image>
						<view class="flex-1 m-ellipsis-l3 fs28 col-3">{{ item.name }}</view>
					</navigator>
				</view>
			</view>
			<!--  -->
			<image v-if="showTopBtn" @click="goTop" class="icon-gotop" src="/static/icon/icon_top.png" mode="aspectFit"></image>
			<!--  -->
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			//bannerLists: [],
			//enrollStatus: 0,
			logo:'',
			freeCourseLists: [],
			freeCourseIndex: 0,
			guessCourseLists: [],
			maxim:{teacher:{name:'',thumb_image:''}},
			qualityCourseLists: [],
			textCourseLists: [],
			statusBarHeight: 20,
			topSwipercurrent: 0,
			topDotsStyles: {
				bottom: 8,
				width: 5,
				height: 5,
				backgroundColor: 'rgba(255, 255, 255, .3)',
				border: '0',
				selectedBackgroundColor: '#FFF',
				selectedBorder: '0'
			},
			topSwiperInfo: [],
			showTopBtn:false,
			platformStatus: 0,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		this.fetchConfig();
		this.fetchLogo();
		this.fetchBanners();
		this.fetchCourseFree();
		this.fetchGuessLike();
		this.fetchMaxim();
		this.fetchQualityCourse();
		this.fetchTextCourse();
	},
	onShareAppMessage(e){
		//#ifdef MP-WEIXIN
		if(e.from=='button'){
			let maxim = this.maxim;
			//console.log(maxim)
			return {
			  title: maxim.content,
			  imageUrl: maxim.teacher.thumb_image,
			  path: ''
			}
		}
		//#endif
	},
	onPageScroll(e){
		//console.log(e);
		if(e.scrollTop > 667){
			this.showTopBtn = true;
		}else{
			this.showTopBtn = false;
		}
	},
	onPullDownRefresh(){
		this.fetchLogo();
		this.fetchBanners();
		this.fetchCourseFree();
		this.fetchGuessLike();
		this.fetchMaxim();
		this.fetchQualityCourse();
		this.fetchTextCourse();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		topSwiperChange(e) {
			this.topSwipercurrent = e.detail.current;
		},
		fetchConfig(){
			//支付开关
			this.$core.get({
				url: 'xiluedu.config/config',
				data: {name:'shopinfo'},
				success: ret => {
					//if(ret.data.vip_status != 'undefined'){
					getApp().globalData.platformStatus = ret.data.vip_status || 1;
					this.platformStatus = ret.data.vip_status || 1;
					//}
				},
				loading: false
			});
		},
		bannerNav(url){
			if(url){
				uni.navigateTo({
					url: url
				})
			}
		},
		//切换免费
		changeFreeTab(index) {
			this.freeCourseIndex = index;
		},
		
		//活动预约
		freeEnroll(){
			let freeCourseLists = this.freeCourseLists ;
			let freeCourseIndex = this.freeCourseIndex;
			if(freeCourseLists[freeCourseIndex].state == 2 && freeCourseLists[freeCourseIndex].enroll_status == 0){
				this.$core.post({
					url: 'xiluedu.course_free/course_free_enroll',
					data: {course_free_id:freeCourseLists[freeCourseIndex].id},
					success: ret => {
						freeCourseLists[freeCourseIndex].enroll_status = 1;
						this.freeCourseLists = freeCourseLists;
						uni.showToast({title:'预约成功',icon:'none'})
					}
				});
			}
		},
		//切换猜你喜欢
		changeGuess() {
			this.fetchGuessLike();
		},
		//LOGO
		fetchLogo() {
			this.$core.get({
				url: 'xiluedu.config/get_image',
				data: {name:'shopinfo',field:'logo'},
				success: ret => {
					this.logo = ret.data.image;
				}
			});
		},
		//轮播图
		fetchBanners() {
			this.$core.get({
				url: 'xiluedu.banner/banners',
				data: { group: 'index' },
				success: ret => {
					this.topSwiperInfo = ret.data;
				}
			});
		},
		//限时免费课程
		fetchCourseFree() {
			this.$core.get({
				url: 'xiluedu.course_free/course_free',
				data: {},
				success: ret => {
					this.freeCourseLists = ret.data;
				}
			});
		},
		//猜你喜欢
		fetchGuessLike() {
			this.$core.get({
				url: 'xiluedu.course/guess_like',
				data: {},
				success: ret => {
					this.guessCourseLists = ret.data;
				}
			});
		},
		//每日一句
		fetchMaxim() {
			this.$core.get({
				url: 'xiluedu.maxim/daily_sentence',
				data: {},
				success: ret => {
					this.maxim = ret.data;
					return true;
				}
			});
		},
		//点赞
		toggleFav() {
			this.$core.post({
				url: 'xiluedu.maxim/toggle_fav',
				data: {maxim_id: this.maxim.id },
				success: ret => {
					this.maxim.fav_count = ret.data.fav_count;
				},
				fail: err => {}
			});
		},
		//精品课程
		fetchQualityCourse() {
			this.$core.get({
				url: 'xiluedu.course/lists',
				data: { sort_name: 'total_num', pagesize: 4 },
				success: ret => {
					this.qualityCourseLists = ret.data.data;
				}
			});
		},
		//落地案例
		fetchTextCourse() {
			this.$core.get({
				url: 'xiluedu.course/lists',
				data: { type: 3, pagesize: 4 },
				success: ret => {
					this.textCourseLists = ret.data.data;
				}
			});
		},
		tabNav(type_index) {
			uni.setStorageSync('type_index', type_index);
			uni.$emit('course_list',type_index)
			uni.switchTab({
				url: '../course_list/course_list'
			});
		},
		navication(id, type) {
			if (type == 3) {
				// 文章
				uni.navigateTo({
					url: '../article_detail/article_detail?course_id=' + id
				});
			} else {
				uni.navigateTo({
					url: '../course_video_detail/course_video_detail?course_id=' + id
				});
			}
		},
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 500
			});
		}
	}
};
</script>
<style scoped>
.container {
	padding: 0 30rpx 30rpx;
}

.main {
	position: relative;
	/* padding-top: calc(90rpx + var(--status-bar-height)); */
}

/*  */
.top-swiper {
	width: 100%;
	height: 340rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.top-swiper .img-swiper {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
/*  */
.feature-row image {
	margin-right: 8rpx;
	display: block;
	width: 34rpx;
	height: 34rpx;
}
/*  */
.menu-box image {
	margin: 0 auto 30rpx;
	display: block;
	width: 90rpx;
	height: 90rpx;
}
/*  */
.start-time {
	white-space: nowrap;
	overflow-x: scroll;
}
.start-time .time-item {
	display: inline-block;
	width: 185rpx;
	height: 84rpx;
	background: #ffffff;
	border: 1rpx solid #e1e1e1;
	border-radius: 10rpx;
	font-size: 22rpx;
	color: #666666;
	line-height: 28rpx;
	text-align: center;
}
.start-time .time-item + .time-item {
	margin-left: 30rpx;
}
.start-time .time-item.active {
	border: 1rpx solid #ed1f34;
	background: #fff5f6;
	color: #ed1f34;
}
/*  */

.course-list1 .nav-course {
	margin-right: 30rpx;
	width: 295rpx;
	width: calc((100% - 30rpx) / 2);
}
.course-list1 .nav-course:nth-of-type(2n) {
	margin-right: 0;
}
.course-list1 .img-kechen {
	margin: 0 auto 25rpx;
	display: block;
	width: 100%;
	height: 165rpx;
	border-radius: 10rpx;
}

.course-list1 .icon-media {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
/*  */
.custom-plan .icon-plan {
	display: block;
	width: 155rpx;
	height: 160rpx;
}
/*  */
.index-title-row .icon-change {
	display: block;
	width: 32rpx;
	height: 24rpx;
}
/*  */
.good-sentence .img-sentence {
	display: block;
	width: 171rpx;
	height: 171rpx;
}
.good-sentence .foot-row .m-button {
	height: 40rpx;
	border-right: 1rpx solid #e1e1e1;
	border-radius: 0;
}
.good-sentence .foot-row .icon {
	display: block;
	width: 40rpx;
	height: 40rpx;
}

/*  */
.case-box {
	overflow: hidden;
}
.case-box .btn {
	padding: 6rpx 0 0;
	margin: 0 4rpx;
	width: 32rpx;
	height: 32rpx;
	background: #ffffff;
	border-radius: 2rpx;
}
.case-box .btn image {
	margin: 0 auto;
	display: block;
	width: 14rpx;
	height: 20rpx;
}
.case-box .nav-case + .nav-case {
	border-top: 1rpx solid #e1e1e1;
}
.case-box .nav-case image {
	display: block;
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}
/*  */
.icon-gotop {
	position: fixed;
	right: 30rpx;
	bottom: 150rpx;
	z-index: 5;
	display: block;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}

.g-btn3.inactive{
	background: #999;
}

@media only screen and (min-width: 800px) {
	.top-swiper {
		height: 670rpx;
		border-radius: 30rpx;
	}
	
	.course-list1 .img-kechen{
		height: 360rpx;
	}
}
</style>
